<template>
    <div class="home">
        <Header head-title="个人资料" go-back="true"></Header>

        <section class="group">
            <div class="resultInfo Select">
                <div class="Select">
                    <img class="cardimg" src="../../assets/img/Avatar.png" alt="">
                    <p class="fonts">头像</p>
                </div>
                <div class="arrow Select" @click="AvatarIn()">
                    <img class="TouX" src="../../assets/img/Touxiang.png" alt="">
                    <img src="../../assets/img/arrow.png" alt="">
                </div>
            </div>
            <div class="resultInfo Select">
                <div class="Select">
                    <img class="cardimg" src="../../assets/img/Name.png" alt="">
                    <p class="fonts">姓名</p>
                </div>
                <div class="arrow Select" @click="NameIn()">
                    <p class="fonts">渣渣灰</p>
                    <img src="../../assets/img/arrow.png" alt="">
                </div>
            </div>
            <div class="resultInfo Select">
                <div class="Select">
                    <img class="cardimg" src="../../assets/img/Sex.png" alt="">
                    <p class="fonts">性别</p>
                </div>
                <div class="arrow Select">
                    <el-select v-model="value" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="resultInfo Select">
                <div class="Select">
                    <img class="cardimg" src="../../assets/img/Age.png" alt="">
                    <p class="fonts">年龄</p>
                </div>
                <div class="arrow Select">
                    <el-input-number v-model="num" @change="handleChange" :min="1" :max="100" label="描述文字"></el-input-number>
                </div>
            </div>
            <div class="resultInfo Select">
                <div class="Select">
                    <img class="cardimg" src="../../assets/img/CsetiType.png" alt="">
                    <p class="fonts">证件类型</p>
                </div>
                <div class="arrow Select">
                    <el-select v-model="valueS" placeholder="请选择">
                        <el-option v-for="item in optionsS" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="resultInfo Select">
                <div class="Select">
                    <img class="cardimg" src="../../assets/img/CertiNum.png" alt="">
                    <p class="fonts">证件号</p>
                </div>
                <div class="arrow Select" @click="CardIn()">
                    <p class="fonts">1283737474888393</p>
                    <img src="../../assets/img/arrow.png" alt="">
                </div>
            </div>
            <div class="resultInfo Select">
                <div class="Select">
                    <img class="cardimg" src="../../assets/img/PhoneMe.png" alt="">
                    <p class="fonts">手机号</p>
                </div>
                <div class="arrow Select" @click="PhoneIn()">
                    <p class="fonts">18202393939</p>
                    <img src="../../assets/img/arrow.png" alt="">
                </div>
            </div>
            <div class="resultInfo Select">
                <div class="Select">
                    <img class="cardimg" src="../../assets/img/Address.png" alt="">
                    <p class="fonts">地址</p>
                </div>
                <div class="arrow Select" @click="AddressIn()">
                    <p class="fonts">北京是朝阳区建国路98号</p>
                    <img src="../../assets/img/arrow.png" alt="">
                </div>
            </div>
        </section>

        <!-- //  修改头像弹框 -->
        <section class="cover" v-if="AvatarType" @click="AvatarSlide()"></section>
        <section v-if="AvatarType" class="TanKuang center borderR">
            <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <section class="Select">
                <el-button type="primary" @click="AvatarSlide()">取消</el-button>
                <el-button type="primary">确定</el-button>
            </section>
        </section>

        <!-- //  修改姓名弹框 -->
        <section class="cover" v-if="NameType" @click="NameSlide()"></section>
        <section v-if="NameType" class="TanKuang center borderR">
            <input class="Back_input" type="text" placeholder="请输入您的姓名">
            <section class="Select">
                <el-button type="primary" @click="NameSlide()">取消</el-button>
                <el-button type="primary">确定</el-button>
            </section>
        </section>

        <!-- //  修改证件号弹框 -->
        <section class="cover" v-if="CardType" @click="CardSlide()"></section>
        <section v-if="CardType" class="TanKuang center borderR">
            <input class="Back_input" type="text" placeholder="请输入证件号码">
            <section class="Select">
                <el-button type="primary" @click="CardSlide()">取消</el-button>
                <el-button type="primary">确定</el-button>
            </section>
        </section>

        <!-- //  修改手机号弹框 -->
        <section class="cover" v-if="PhoneType" @click="PhoneSlide()"></section>
        <section v-if="PhoneType" class="TanKuang center borderR">
            <input class="Back_input" type="text" placeholder="请输入手机号码">
            <section class="Select">
                <el-button type="primary" @click="PhoneSlide()">取消</el-button>
                <el-button type="primary">确定</el-button>
            </section>
        </section>

        <!-- //  修改地址弹框 -->
        <section class="cover" v-if="AddressType" @click="AddressSlide()"></section>
        <section v-if="AddressType" class="TanKuang center borderR">
            <input class="Back_input" type="text" placeholder="请输入您的新地址">
            <section class="Select">
                <el-button type="primary" @click="AddressSlide()">取消</el-button>
                <el-button type="primary">确定</el-button>
            </section>
        </section>

        <el-button class="Login gotoPay" type="primary">保存修改</el-button>

    </div>
</template>
<script>

import Header from '../../components/Header'
export default {
  data () {
    return {
      AvatarType: false,
      NameType: false,
      AddressType: false,
      PhoneType: false,
      CardType: false,
      //  选择男女
      options: [{ value: '0', label: '男' },
        { value: '1', label: '女' }],
      value: '0',

      num: 32,

      //    选择证件类型
      optionsS: [
        { value: '1', label: '身份证' },
        { value: '2', label: '居民健康证' },
        { value: '3', label: '护照' }
      ],
      valueS: '1',
      imageUrl: ''
    }
  },
  components: {
    Header
  },
  methods: {
    handleChange (value) {
      console.log(value)
    },
    //  身份证号弹框
    CardSlide () {
      this.CardType = false
    },
    CardIn () {
      this.CardType = true
    },
    //  修改手机号弹框
    PhoneIn () {
      this.PhoneType = true
    },
    PhoneSlide () {
      this.PhoneType = false
    },
    //  修改地址弹框
    AddressIn () {
      this.AddressType = true
    },
    AddressSlide () {
      this.AddressType = false
    },
    //  修改姓名
    NameIn () {
      this.NameType = true
    },
    NameSlide () {
      this.NameType = false
    },
    //  修改头像
    AvatarIn () {
      this.AvatarType = true
    },
    AvatarSlide () {
      this.AvatarType = false
    },

    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style scoped>
.TouX {
    width: 0.6rem;
    border-radius: 50%;
}
.Back_input {
    text-align: center;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .cover {
      z-index: 900;
  }
</style>
